<template>
    <div class="business">
        <div class="bus_operate">
            <el-form :model="formData" label-width="120px">
                <el-form-item label="服务选择">
                    <el-select v-model="formData.service" placeholder="请选择服务">
                        <el-option label="预约上门" value="2" />
                        <el-option label="线上挂号" value="1" />
                    </el-select>
                </el-form-item>
                <div v-if="formData.service==2">
                    <el-form-item label="选择时间">
                        <el-date-picker
                            v-model="changTime"
                            @change="TimeStart()"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            size="default"
                        />
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input @focus="selectArea" v-model="formData.address" />
                    </el-form-item>
                </div>
                <div v-else-if="formData.service==1">
                    <el-form-item label="科室">
                        <el-select v-model="formData.deptId" placeholder="请选择科室">
                            <el-option v-for="(item,index) in deptTable" :key="index" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-col :span="11">
                            <el-time-picker
                            @change="TimeStart('s')"
                            v-model="formData.startTime"
                            placeholder="开始时间"
                            style="width: 100%"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-col :span="11">
                            <el-time-picker
                            @change="TimeStart('e')"
                            v-model="formData.endTime"
                            placeholder="结束时间"
                            style="width: 100%"
                            />
                        </el-col>
                    </el-form-item>
                </div>
                <el-form-item label="备注">
                    <el-input v-model="formData.descrs" type="textarea" />
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onSubmit">开启</el-button>
                </el-form-item>
            </el-form>
            <div class="contentMark" v-if="contentMark">
                <div v-if="contentMark.serverId==1">
                    <div>排队号：<span>{{ contentMark.count }}</span></div>
                    <div>排队编号：<span>{{ contentMark.id }}</span></div>
                </div>
                <div v-else-if="contentMark.serverId==2" style="padding: 0 0 0 16px;">
                    <div>医生编号：<span>{{ contentMark.dname }}</span></div>
                    <div>医生电话：<span>{{ contentMark.dIphone }}</span></div>
                    <div>账单编号：<span>{{ contentMark.id }}</span></div>
                    <div>价格：<span>{{ contentMark.price }}</span>￥</div>
                </div>
            </div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="选择地点"
            width="30%"
            height="300px"
        >
           <div class="map">
                <Map @addr="Getaddr($event)" :Area="dialogVisible"></Map>
           </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage  } from 'element-plus'
import Map from './assist/map'
import { number } from 'echarts'
export default defineComponent({
    components:{
        Map
    },
    data(){
        return{
            tableData:[],
            deptTable:[],
            changTime:'',
            contentMark:null,
            dialogVisible:false,
            formData:{
                "service":'',
                "uid":'',
                "deptId":'',
                "startTime":'',
                "endTime":'',
                "address":'',
                "lal":'',
                "descrs":''
            },
            user:null
        }
    },
    setup() {
        // 路由
        const router = useRouter();
        const route = useRoute();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            router,
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
        this.formData.address = this.user.address;
        this.formData.lal = this.user.lal;
        this.loadData();
    },
    methods:{
        loadData(){
            let self = this;
            let row = self.pageData();
            row.name = ' ',
            self.$http.post(`${self.baseUrl}/deptinfo/selectName`,row).then(res=>{
                let {document} = res.data;
                self.deptTable = document;
            }) 
        },
        TimeStart(m){
            if(m=="s"){
                this.formData.startTime = this.formatDateTime(this.formData.startTime,"yyyy-MM-dd HH:mm:ss");
            }else if(m=="e"){
                this.formData.endTime = this.formatDateTime(this.formData.endTime,"yyyy-MM-dd HH:mm:ss");
            }else{
                this.formData.startTime = this.formatDateTime(this.changTime[0],"yyyy-MM-dd");
                this.formData.endTime = this.formatDateTime(this.changTime[1],"yyyy-MM-dd");
            }
        },
        onSubmit(){
            let self = this;
            this.formData.uid = this.user.Id;
            self.$http.post(`${self.baseUrl}/business/addBusiness`,this.formData).then(res=>{
                if(res.data.code == 200){
                    self.contentMark = res.data.data;
                    self.contentMark.price = Number(self.contentMark.price).toFixed(2);
                    ElMessage({
                        message:res.data.msg,
                        type:'success'
                    })
                }else if(res.data.code==201){
                    self.contentMark = res.data.data;
                    ElMessage({
                        message:res.data.msg,
                        type:'warning'
                    })
                }
            })
        },
        selectArea(){
            this.dialogVisible = true;
        },
        // 转换时间戳
        formatDateTime(date, format){
            const o = {
                'M+': date.getMonth() + 1, // 月份
                'd+': date.getDate(), // 日
                'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
                'H+': date.getHours(), // 小时
                'm+': date.getMinutes(), // 分
                's+': date.getSeconds(), // 秒
                'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                S: date.getMilliseconds(), // 毫秒
                a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
                A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
            };
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            for (let k in o) {
                if (new RegExp('(' + k + ')').test(format)) {
                format = format.replace(
                    RegExp.$1,
                    RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                );
                }
            }
            return format;
        },
        Getaddr(msg){
            let { lng , lat} = msg.point;
            this.formData.address = `${msg.address}-${msg.title}`;
            this.formData.lal = `[${lng},${lat}]`
        },
        pageData(){
            let row = {};
            row.end = 20;
            row.current = 1;
            return row;
        }
    }
})
</script>
<style scoped>
    .bus_operate{
        width: 40%;
        margin: auto;
        padding: 20px 0;
        position: relative;
    }
    .contentMark{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: white;
        top: 0;
        left: 0;
        border-radius: 10px;
        box-shadow: 0px 1px 7px 3px #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        line-height: 42px;
        font-size: 20px;
        color: #504949;
    }
    .contentMark div span{
        color: #f70805;
        font-size: larger;
    }
    .map{
        width: 100%;
        height: 300px;
    }
</style>